<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <h1>参考帖子</h1>
        <a href="https://segmentfault.com/a/1190000006599500">MVVM vue 双向数据绑定</a>
    </div>
    <div id="app">
        <input type="text">
    </div>
    <script>
        //实现对象的数据劫持



        // let vm = new Vue({
        //     el: "#app",
        //     data: {
        //         name: "张三",
        //         age: 100
        //     }
        // })

        class Vue {
            constructor(config) {
                for (let key in config.data) {
                    //vm_data 存储data；并数据劫持 实现v-model的双向代理
                    Object.defineProperty(this._data, key, {
                        get() {

                        },
                        set() {

                        }
                    })
                    //vm 对 vm._data的数据代理
                    Object.defineProperty(this, key, {
                        get() {
                            return this._data[key];
                        },
                        set(value) {
                            this._data[key] = value;
                        }
                    })
                }
            }
            observe(objData) {
                if (!objData || typeof objData !== 'object') {
                    return;
                }
                Object.keys(objData).forEach((key) => {
                    let _value = objData[key];
                    if (!objData || typeof objData[key] != "object") {
                        Object.defineProperty(objData, key, {
                            enumerable: true,
                            configurable: false,
                            get() {
                                _value;
                            },
                            set(value) {
                                console.log(`修改了${key},${_value}=>${value}`);
                                _value = value;
                            }
                        })
                    } else {
                        observe(objData[key]);
                    }
                })
            }
        }
       function observe(objData) {
                if (!objData || typeof objData !== 'object') {
                    return;
                }
                Object.keys(objData).forEach((key) => {
                    let _value = objData[key];
                    if (!objData || typeof objData[key] != "object") {
                        Object.defineProperty(objData, key, {
                            enumerable: true,
                            configurable: false,
                            get() {
                                return _value;
                            },
                            set(value) {
                                console.log(`修改了${key},${_value}=>${value}`);
                                _value = value;
                            }
                        })
                    } else {
                        observe(objData[key]);
                    }
                })
            }
        let da2 = { name: "张三", age:100,children:{name:"zhangsi",age:80} }
        observe(da2)
        console.log(da2);
    </script>
</body>
</html>